import React from 'react';
import {Input, Form, Button} from 'antd';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import styles from './style.less';

function LoginForm(props) {
  const {size = 'large', title = '欢迎登录', subTitle = '', onSubmit, message} = props;
  const [form] = Form.useForm();

  const onFinish = (result) => {
    onSubmit && onSubmit(result)
  }

  return (
    <div className="loginFormContent">
      <div className="formHeader">
        <div className="title">{title}</div>
        <div className="subTitle">{subTitle}</div>
      </div>
      <div className="formContent">
        <Form onFinish={onFinish} form={form}>
          <Form.Item name="account" rules={[{required: true, message: '请输入账号'}]}>
            <Input prefix={<UserOutlined/>} size={size} placeholder="请输入账号"/>
          </Form.Item>
          <Form.Item name="password" rules={[{required: true, message: '请输入密码'}]}>
            <Input.Password prefix={<LockOutlined/>} size={size} placeholder="请输入密码"/>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" size={size} block>登录</Button>
          </Form.Item>
        </Form>
      </div>
      <div className="formFooter">{message}</div>
    </div>
  );
}

export default LoginForm;
